<template>
  <a-modal
    :visible="show"
    width="80vw"
    height="70vh"
    :bodyStyle="{ padding: '10px' }"
    title="日志查看"
    @ok="handleOk"
    @cancel="handleOk"
    :maskClosable="false"
    :key="show"
  >
  <div class="panel">
    <div class="container">
      <div class="header">
        <a-row type="flex" justify="space-between" align="middle">
          <a-col style="display: flex; justify-content: start">
          <a-switch style="margin-left:20px" v-model="showType" checked-children="时间轴" un-checked-children="表格" />
            <a-button class="hte-btn del-btn" @click="handleSearch">刷新</a-button>
          </a-col>
          <a-col style="display: flex; justify-content: end">
            <a-button class="hte-btn del-btn" @click="showSearchForm = true">高级搜索</a-button>
          </a-col>
        </a-row>
      </div>

      <a-modal
        :visible="showSearchForm"
        width="70vw"
        :bodyStyle="{ padding: '10px' }"
        title="高级查询"
        @ok="handleSearch"
        @cancel="showSearchForm = false"
      >
        <a-form-model
          ref="ruleForm"
          :laba-col="labelCol"
          :wrapper-col="wrapperCol"
          @keyup.enter.native="handleToSearch"
        >
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-model-item label="业务ID:">
                <a-input v-model="searchForm.busKey" allowClear> </a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-modal>
      <div class="content-list">
        <a-table
          class="hte-table-content"
          :columns="columns"
          :data-source="records"
          :pagination="false"
          :rowKey="(record) => record.id"
          bordered
           v-if="!showType"
        >
          <template slot="sortIndexRender" slot-scope="text, record, index">
            {{ index + 1 }}
          </template>
          <template slot="contentRender" slot-scope="text,">
            <span class="kala_text" v-html="text"></span>
          </template>
          <template slot="outputParam" slot-scope="text, record">
            <span class="kala_text" @click="showJson(record.outputParam)"> 查看 </span>
          </template>
        </a-table>
        <a-timeline v-if="showType">
        <a-timeline-item color="green" v-for="(item,index) in records" :key="'a-timeline-item_'+index"><p>
          <span style="margin-right:20px">{{item.operationTime}}</span>
          <span style="margin-right:20px">{{item.operator}}</span>
          <span style="margin-right:20px">{{item.operationType}}</span>  
          </p>
        <p v-html="item.content" style="white-space:pre-wrap"></p>
        </a-timeline-item>
        </a-timeline>
        <a-pagination
          show-size-changer
          :default-current="1"
          :total="searchForm.total"
          @change="pageChange"
          @showSizeChange="onShowSizeChange"
          :show-total="(total) => `共 ${total} 条记录`"
        />
      </div>
    </div>
      
  </div>
  </a-modal>
</template>
<script>
import { postAction } from '@/api/manage'
export default {
  name: 'dataChangeRecord',
  components: {
    HomeNav: () => import('@/components/layouts/HomeNav'),
    JsonViewer: () => import('@/components/tools/JsonViewer'),
  },
  data() {
    return {
      userinfo: {
        info: this.$store.getters.userInfo,
        module: 'dataChangeRecord',
      },
      urls: {
        page: '/hteDataChangeRecord/page',
      },
      show:false,
      limitBusKey:[],
      showType:false,
      columns: [
        {
          title: '序号',
          dataIndex: 'sortIndex',
          scopedSlots: { customRender: 'sortIndexRender' },
          width: '80px',
          align: 'center',
        },
        {
          title: '业务ID',
          dataIndex: 'busKey',
          align: 'center',
           width: '180px',
        },
        {
          title: '业务表名',
          dataIndex: 'busType',
          align: 'center',
          width:'180px'
        },
        {
          title: '操作类型',
          dataIndex: 'operationType',
          align: 'center',
          width:'180px'
        },
        {
          title: '操作详情',
          dataIndex: 'content',
          width: '120px',
          align: 'left',
          width:'280px',
           scopedSlots: { customRender: 'contentRender' },
        },
        {
          title: '操作人',
          dataIndex: 'operator',
          width: '120px',
          align: 'center',
        },
        {
          title: '操作时间',
          dataIndex: 'operationTime',
          width: '120px',
          align: 'center',
        },
        {
          title: '操作方法',
          dataIndex: 'operationMethod',
          width: '200px',
          align: 'center',
        },
      ],
      showSearchForm: false,
      records: [],
      selectedRowKeys: [],
      selectedRow: [],
      labelCol: { span: 8 },
      wrapperCol: { span: 15 },
      searchForm: {
        offset: 0,
        total: 0,
        pageNo: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40', '50'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
      },
      visible:false,
      json:[Object,Array]
    }
  },

  created() {
    
  },
  methods: {
    open(limitBusKey){
      this.limitBusKey = limitBusKey
      this.fetchList()
      this.show = true
    },
    fetchList() {
      let url = this.urls.page
      this.searchForm.limitBusKey = this.limitBusKey.join(",")
      postAction(url, this.searchForm).then((res) => {
        if (res.code == 200) {
          this.records = res.result.records
          this.$set(this.searchForm, 'total', res.result.total)
          this.showSearchForm = false
        } else {
          this.$message.error('获取数据失败')
        }
      })
    },
    showJson(jsonStr) {
      if (jsonStr) {
        this.json = JSON.parse(jsonStr)
        this.$refs.JsonViewer.doOpen()
      }
      this.visible = true
    },
    handleSearch() {
      this.$set(this.searchForm, 'pageNo', 1)
      this.fetchList()
    },
    pageChange(pageNo, pageSize) {
      this.$set(this.searchForm, 'pageSize', pageSize)
      this.$set(this.searchForm, 'pageNo', pageNo)
      this.fetchList()
    },
    onShowSizeChange(pageNo, pageSize) {
      this.$set(this.searchForm, 'pageSize', pageSize)
      this.$set(this.searchForm, 'pageNo', 1)
      this.fetchList()
    },
    handleOk() {
      this.show = false
    },
  },
}
</script>

<style scoped>
.demo-table-expand .a-form-model-item {
  margin-right: 0;
  margin-bottom: 0px;
}
.demo-table-expand span {
  display: inline-block;
  white-space: nowrap;
  width: 95%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.a-form-model-item >>> .a-form-model-item--mini .a-form-model-item__label {
  color: #606266 !important;
  font-size: 12px !important;
  font-weight: normal;
}
.a-table >>> .a-table__expanded-cell[class*='cell'] {
  padding: 0px 0px 10px 0px;
}

.expand-title {
  height: 30px;
  line-height: 30px;
  background-color: #f1f1f1;
  padding-left: 50px;
  margin-bottom: 5px;
  font-size: 12px;
}
.a-form-model-item >>> .a-form-model-item__content {
  height: 36px;
}
.ellipse-tooltips {
  display: inline-block;
  white-space: nowrap;
  width: 95%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ellipse-tooltips span {
  width: unset !important;
}
.a-range >>> .a-range-separator {
  width: 20px;
}
.searchForm {
  display: flex;
  flex-direction: row;
}
.searchForm-left {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 85vw;
}
.searchForm-right {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  min-width: 280px;
  border-left: #cccccc 2px solid;
}
</style>

<style lang="less" scoped>
@import '~@assets/less/hte-main.less';
.panel {
  .banner {
    background-image: url(~@assets/contract-top.png);
  }
  .container {
    .content-list {
      margin-top: 15px;
    }
  }
  .font-active {
    cursor: pointer;
  }
}
/deep/ #process-container {
  width: unset !important;
}
#process-container {
  background: #fff;
  padding: 40px 22px;
  width: auto;
  margin: 0 auto;
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
}
/deep/ .ant-modal-body {
  height: 60vh;
  overflow-y:auto;
}
.kala_text {
  white-space: pre-wrap;
  word-break: break-word;
  text-align: center;
  word-wrap: break-word;
  white-space: pre-wrap;
}
</style>

